<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用说明 - 模切材料小管家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* TDesign 工业品色彩系统 */
            --primary-color: #0052d9;
            --primary-light: #266fe8;
            --primary-dark: #003cab;
            --secondary-color: #f2f3ff;
            --accent-color: #e37318;
            --success-color: #00a870;
            --warning-color: #ed7b2f;
            --error-color: #d54941;
            
            /* 背景色系 */
            --bg-color-page: #f5f7fa;
            --bg-color-container: #ffffff;
            --bg-color-secondary: #f8f9fc;
            
            /* 边框和分割线 */
            --border-color: #e7e7e7;
            --border-color-light: #f0f0f0;
            --border-radius-small: 3px;
            --border-radius-medium: 6px;
            --border-radius-large: 9px;
            
            /* 文字色彩 */
            --text-primary: #1a1a1a;
            --text-secondary: #4e5969;
            --text-placeholder: #86909c;
            --text-disabled: #c9cdd4;
            
            /* 阴影系统 */
            --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-2: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
            --shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
            
            /* 间距系统 */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: var(--bg-color-page);
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: var(--bg-color-container);
            min-height: 100vh;
            box-shadow: var(--shadow-1);
        }
        
        /* 顶部导航栏 */
        .navbar {
            position: sticky;
            top: 0;
            background: var(--bg-color-container);
            border-bottom: 1px solid var(--border-color-light);
            padding: var(--space-4);
            display: flex;
            align-items: center;
            gap: var(--space-3);
            z-index: 100;
        }
        
        .navbar .back-btn {
            font-size: 20px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .navbar .back-btn:hover {
            color: var(--primary-color);
        }
        
        .navbar .title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        /* 页面内容 */
        .page-content {
            padding: var(--space-4);
        }
        
        /* 搜索框 */
        .search-section {
            margin-bottom: var(--space-6);
        }
        
        .search-box {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            background: var(--bg-color-secondary);
            border-radius: var(--border-radius-medium);
            padding: var(--space-3) var(--space-4);
            border: 1px solid var(--border-color-light);
        }
        
        .search-box i {
            color: var(--text-placeholder);
            font-size: 16px;
        }
        
        .search-box input {
            flex: 1;
            border: none;
            background: transparent;
            outline: none;
            font-size: 14px;
            color: var(--text-primary);
        }
        
        .search-box input::placeholder {
            color: var(--text-placeholder);
        }
        
        /* 分类标题 */
        .category-section {
            margin-bottom: var(--space-6);
        }
        
        .category-title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-2);
            border-bottom: 2px solid var(--border-color-light);
        }
        
        .category-title i {
            color: var(--primary-color);
            font-size: 18px;
        }
        
        /* 问题列表 */
        .question-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }
        
        .question-item {
            background: var(--bg-color-container);
            border: 1px solid var(--border-color-light);
            border-radius: var(--border-radius-medium);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .question-item:hover {
            border-color: var(--primary-light);
            box-shadow: var(--shadow-2);
        }
        
        .question-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-4);
            cursor: pointer;
            user-select: none;
        }
        
        .question-header:active {
            background: var(--bg-color-secondary);
        }
        
        .question-title {
            flex: 1;
            display: flex;
            align-items: center;
            gap: var(--space-3);
            font-size: 15px;
            color: var(--text-primary);
            font-weight: 500;
        }
        
        .question-title i {
            color: var(--primary-color);
            font-size: 14px;
        }
        
        .question-arrow {
            color: var(--text-placeholder);
            font-size: 14px;
            transition: transform 0.3s ease;
        }
        
        .question-item.active .question-arrow {
            transform: rotate(90deg);
        }
        
        .question-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background: var(--bg-color-secondary);
        }
        
        .question-item.active .question-content {
            max-height: 1000px;
        }
        
        .question-detail {
            padding: var(--space-4);
            font-size: 14px;
            line-height: 1.8;
            color: var(--text-secondary);
        }
        
        .question-detail h4 {
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
            margin-top: var(--space-3);
            margin-bottom: var(--space-2);
        }
        
        .question-detail h4:first-child {
            margin-top: 0;
        }
        
        .question-detail p {
            margin-bottom: var(--space-2);
        }
        
        .question-detail ol, .question-detail ul {
            margin-left: var(--space-5);
            margin-bottom: var(--space-2);
        }
        
        .question-detail li {
            margin-bottom: var(--space-1);
        }
        
        .question-detail .note {
            background: #fff9e6;
            border-left: 3px solid var(--warning-color);
            padding: var(--space-3);
            border-radius: var(--border-radius-small);
            margin: var(--space-3) 0;
            font-size: 13px;
        }
        
        .question-detail .highlight {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        /* 底部联系 */
        .contact-footer {
            margin-top: var(--space-8);
            padding: var(--space-6);
            background: var(--bg-color-secondary);
            border-radius: var(--border-radius-large);
            text-align: center;
        }
        
        .contact-footer h3 {
            font-size: 16px;
            color: var(--text-primary);
            margin-bottom: var(--space-4);
        }
        
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            margin-bottom: var(--space-4);
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .contact-item i {
            color: var(--primary-color);
        }
        
        .contact-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius-medium);
            padding: var(--space-3) var(--space-6);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .contact-btn:hover {
            background: var(--primary-light);
            box-shadow: var(--shadow-2);
        }
        
        .contact-btn:active {
            transform: translateY(1px);
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .question-item {
            animation: fadeIn 0.4s ease;
        }
        
        .question-item:nth-child(2) { animation-delay: 0.05s; }
        .question-item:nth-child(3) { animation-delay: 0.1s; }
        .question-item:nth-child(4) { animation-delay: 0.15s; }
        .question-item:nth-child(5) { animation-delay: 0.2s; }
    </style>
</head>
<body>
    <div class="container">
        <!-- 导航栏 -->
        <div class="navbar">
            <i class="fas fa-arrow-left back-btn" onclick="history.back()"></i>
            <div class="title">使用说明</div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 搜索框 -->
            <div class="search-section">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索帮助内容..." id="searchInput">
                </div>
            </div>

            <!-- 账号相关 -->
            <div class="category-section">
                <div class="category-title">
                    <i class="fas fa-user-circle"></i>
                    <span>账号相关</span>
                </div>
                <div class="question-list">
                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何注册账号</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <ol>
                                    <li>勾选【已阅读并同意《隐私政策》和《服务协议》】</li>
                                    <li>填写手机号和验证码，完成首次注册和登录。</li>
                                    <li>再次登录，点击【手机号快速验证】完成登录</li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何成为付费会员</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <ol>
                                    <li>首页点击【早鸟价¥365元/年立即开通】后，进入付费会员注册页面，点击【¥365元/年立即开通】完成在线支付，即成为付费会员</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 发布相关 -->
            <div class="category-section">
                <div class="category-title">
                    <i class="fas fa-plus-circle"></i>
                    <span>发布相关</span>
                </div>
                <div class="question-list">
                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何发布产品信息</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <ol>
                                    <li>点击底部tab栏【发布】，进入发布首页。</li>
                                    <li>根据需要，点击【发布材料】/【发布加工】/【发布库存】，填写产品类别、产品名称等产品信息后，点击【发布】完成提交。</li>
                                </ol>
                                <div class="note">
                                    <i class="fas fa-info-circle"></i> 备注：发布前，需成为付费会员。
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何发布求购信息</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <ol>
                                    <li>点击底部tab栏【发布】，进入发布首页。</li>
                                    <li>根据需要，点击【发布拼单】/【发布求购】，填写产品类别、产品名称等求购信息后，点击【发布】完成提交。</li>
                                </ol>
                                <div class="note">
                                    <i class="fas fa-info-circle"></i> 备注：发布前，需成为付费会员。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 交易相关 -->
            <div class="category-section">
                <div class="category-title">
                    <i class="fas fa-handshake"></i>
                    <span>交易相关</span>
                </div>
                <div class="question-list">
                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何参与拼单</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <ol>
                                    <li>在首页点击【来拼单】，可以看到各类拼单信息。</li>
                                    <li>选中某个拼单后，进入详情，点击【参与拼单】即可参与拼单中。</li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何对材料、加工、散料进行询价</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <ol>
                                    <li>在首页点击【找材料商】/【找加工商】/【找散料】，可以看到各类供应信息。</li>
                                    <li>选中某个供应信息后，比如点击【找散料】进入详情，点击【立即询价】填写联系方式及询价内容后，即完成询价，等待供应商联系。</li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何对求购进行接单报价</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <ol>
                                    <li>在底部tab点击【求购】，可以看到各类求购信息。</li>
                                    <li>点击求购信息进入详情，点击【提交接单】填写联系方式及接单内容后，即完成接单报价，等待求购人联系。</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 安全与信用 -->
            <div class="category-section">
                <div class="category-title">
                    <i class="fas fa-shield-alt"></i>
                    <span>安全与信用</span>
                </div>
                <div class="question-list">
                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何进行虚假内容举报</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <ol>
                                    <li>进入要举报的内容详情页（材料/加工/散料/求购等）</li>
                                    <li>点击右上角"举报"icon</li>
                                    <li>选择举报原因：虚假信息、价格欺诈、侵权内容、违规宣传、其他</li>
                                    <li>提交举报</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 积分相关 -->
            <div class="category-section">
                <div class="category-title">
                    <i class="fas fa-gift"></i>
                    <span>积分相关</span>
                </div>
                <div class="question-list">
                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何获取积分</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <ol>
                                    <li>成功推荐 1 人注册并完成小程序个人或企业认证，推荐人可获得 100 积分 / 人。</li>
                                    <li>完成小程序个人认证，可获得 50 积分，每个手机号限 1次；完成小程序企业认证，可获得 500 积分，每个手机号限 1 次。</li>
                                    <li>每日登录小程序完成签到，可获得 10 积分 / 次，每日限 1 次。</li>
                                    <li>在发布入口上传 1 条信息，可获得 50 积分 / 条，上传数量不限。</li>
                                    <li>注册365元/年的付费会员，享1.5倍积分(仅限付费手机号)</li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何使用积分</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <h4>积分商城兑换</h4>
                                <p>会员可在积分商城使用累计积分兑换商品或服务，兑换品类包括但不限于：办公用品、健康食品、培训活动、团建活动</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他常见问题 -->
            <div class="category-section">
                <div class="category-title">
                    <i class="fas fa-question-circle"></i>
                    <span>其他常见问题</span>
                </div>
                <div class="question-list">
                    <div class="question-item">
                        <div class="question-header" onclick="toggleQuestion(this)">
                            <div class="question-title">
                                <i class="fas fa-circle"></i>
                                <span>如何联系客服</span>
                            </div>
                            <i class="fas fa-chevron-right question-arrow"></i>
                        </div>
                        <div class="question-content">
                            <div class="question-detail">
                                <p>点击底部tab栏【客服】，填写留言信息，进行在线提交；或者拨打客服热线进行直接沟通</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部联系信息 -->
            <div class="contact-footer">
                <h3>还有其他问题？</h3>
                <div class="contact-info">
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <span>欢迎联系客服</span>
                    </div>
                </div>
                <button class="contact-btn" onclick="contactService()">
                    <i class="fas fa-comments"></i>
                    <span>联系客服</span>
                </button>
            </div>
        </div>
    </div>

    <script>
        // 切换问题展开/收起
        function toggleQuestion(header) {
            const item = header.parentElement;
            const allItems = document.querySelectorAll('.question-item');
            
            // 如果点击的是已展开的项，则收起
            if (item.classList.contains('active')) {
                item.classList.remove('active');
            } else {
                // 收起其他所有项
                allItems.forEach(i => i.classList.remove('active'));
                // 展开当前项
                item.classList.add('active');
                
                // 滚动到可视区域
                setTimeout(() => {
                    header.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }, 300);
            }
        }

        // 搜索功能
        const searchInput = document.getElementById('searchInput');
        searchInput.addEventListener('input', function(e) {
            const searchText = e.target.value.toLowerCase();
            const allQuestions = document.querySelectorAll('.question-item');
            
            allQuestions.forEach(item => {
                const title = item.querySelector('.question-title span').textContent.toLowerCase();
                const content = item.querySelector('.question-detail').textContent.toLowerCase();
                
                if (title.includes(searchText) || content.includes(searchText)) {
                    item.style.display = 'block';
                    
                    // 如果有搜索内容，高亮匹配的标题
                    if (searchText) {
                        item.style.backgroundColor = '#fffbf0';
                    } else {
                        item.style.backgroundColor = '';
                    }
                } else {
                    item.style.display = 'none';
                }
            });

            // 隐藏没有匹配项的分类
            const categories = document.querySelectorAll('.category-section');
            categories.forEach(category => {
                const visibleItems = category.querySelectorAll('.question-item[style*="display: block"]');
                if (visibleItems.length === 0 && searchText) {
                    category.style.display = 'none';
                } else {
                    category.style.display = 'block';
                }
            });
        });

        // 联系客服
        function contactService() {
            alert('即将跳转到客服页面...');
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('帮助页面加载完成');
            
            // 统计问题数量
            const questionCount = document.querySelectorAll('.question-item').length;
            console.log(`共有 ${questionCount} 个常见问题`);
        });
    </script>
</body>
</html>
